<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="Template.css">
    <script src="../js/jquery-3.4.1.js"></script>
    <style type="text/css">

        .demo:hover {
            width: 150px;
            height: 150px;
        }

    </style>
</head>
<body>
<div class="root">
    <div class="introduce">
        <span>transition属性用于控制过渡时间, 使某个属性从A值慢慢的过渡到B值, 尤其是在hover动画中应用较为广泛</span>
    </div>
    <div class="example">
        <div class="example-left">
            <ul>
                <li><input name="attributeControl" type="radio" value="1"/>transition: 0.5s</li>
                <li><input name="attributeControl" type="radio" value="2"/>transition: 2s</li>
                <li><input name="attributeControl" type="radio" value="3"/>transition: height 2s</li>
            </ul>
        </div>
        <div class="example-right">
            <div class="demo">我是demo</div>
            <hr class="x25" />
            <hr class="x50" />
            <hr class="x75" />
            <hr class="y25" />
            <hr class="y50" />
            <hr class="y75" />
        </div>
    </div>
    <div class="remarks">
        <span class="remarks-text"></span>
    </div>

</div>
<script type="text/javascript">

    $(function () {

        $("input[name='attributeControl']").click(function () {
            const checkVal = $(this).val();
            $(".remarks-text").text("");
            switch (checkVal) {
                case "1":
                    $(".demo").css("transition", "0.5s");
                    $(".remarks-text").text("该属性控制所有属性过渡需要0.5s");
                    break;
                case "2":
                    $(".demo").css("transition", "2s");
                    $(".remarks-text").text("该属性控制所有属性过渡需要2s");
                    break;
                case "3":
                    $(".demo").css("transition", "height 2s");
                    $(".remarks-text").text("该属性控制height属性过渡需要2s, width属性过渡不限制");
                    break;
                default:
                    break;
            }
        });

    })

</script>
</body>
</html>